<template>
    <div class="cartContainer">
          <!-- 顶部 名称 -->
        <div class="header">
            <span class="title">购物车</span>
            
            <span class="psna">编辑</span>
            <span class="coupons">领券</span>
        </div>
        <!-- 黄色自营区 -->
        <div v-show="true">
            <div class="autarky">自营仓商品，已满99元免邮</div>
                <div class="hd">
                <span class='cart'>全球购</span>
                <span class="promTip">已满足1件享4折起限时换购</span>
                <span class='promBtn'>再逛逛></span>
                <p class="promGuide">去换购商品></p>
        </div>
       <div>
         <!-- 购物车列表 -->
				<div class="cartList">
					<div class="cartItem" >
						<p class="iconfont icon-xuanzhong selected" ></p>
						<div class="shopItem">
							<img class="shopImg" src="https://yanxuan-item.nosdn.127.net/7cca3cbb92bf93a3cf70eb01a6413c59.png?type=webp&imageView&thumbnail=160x0&quality=75">
							<div class="shopInfo">
                
								<p class="nameIn"><span>特价</span>【大捡漏】珍贵触感，女式V领小山羊绒衫</p>
								<span class="price">￥20元 </span>
                <!-- 控制数量 -->
                <div class="lessc">
                  <van-stepper v-model="value" min="0"/>
                </div>    
							</div>
						</div>   
					</div>
				</div>
				<!-- 底部下单 -->
				<div class="cartFooter">
          <div>
            <span class="iconfont icon-xuanzhong selected" ></span>
					  <span class="allSelected">已选 3件</span>
          </div>
					<div class="right">
						<p class="totalPrice">合计: ￥23</p>
						<p class="preOrder" @click="handlerDetail">下单</p>
					</div>
				</div>
            </div>
			<div class="img" v-show="false">
                <ul class="item">
                    <li><van-icon name="circle" />30天无忧退货</li>
                    <li><van-icon name="circle" />48小时快速退款</li>
                    <li><van-icon name="circle" />满99元免邮费</li>
                </ul>
				<img class="cartImg" src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noCart-d6193bd6e4.png?imageView&type=webp">
				<p class="hint">购物车还是空的，赶紧去购物吧</p>
			</div>
       </div>
    </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: 0,
    };
  },
  methods:{
    handlerDetail(){
      this.$router.push('/detail')
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.cartContainer {
  width: 100%;
  height: 667px;
  overflow: hidden;
  background-color: #eee;
  .header {
    width: 375px;
    height: 44px;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    .title {
      line-height: 44px;
      font-size: 18px;
      padding: 0 15px;
    }
    .psna {
      float: right;
      font-size: 15px;
      line-height: 44px;
      padding-right: 15px;
    }
    .coupons {
      float: right;
      line-height: 44px;
      padding-right: 25px;
      color: #fc865f;
      font-size: 12px;
    }
  }
  .autarky {
    width: 375px;
    height: 40px;
    color: #f48f18;
    line-height: 40px;
    box-sizing: border-box;
    padding: 0 15px;
    font-size: 15px;
    background-color: #fff8d8;
  }
  .hd {
    width: 375px;
    height: 73px;
    background-color: #fff;
    .cart {
      width: 56px;
      height: 16px;
      font-size: 12px;
      margin-left: 15px;
      color: #fff;
      background: #fc865f;
    }
    .promTip {
      width: 219px;
      height: 20px;
      margin-left: 10px;
      font-size: 12px;
    }
    .promBtn {
      width: 45px;
      height: 18px;
      line-height: 35px;
      font-size: 12px;
      padding-right: 15px;
      float: right;
      color: #dd1a21;
    }
    .promGuide {
      font-size: 12px;
      width: 317px;
      height: 28px;
      line-height: 28px;
      margin: 10px 15px 5px 43px;
      background: rgba(252, 134, 95, 0.05);
    }
  }
  .cartList {
    width: 375px;
    height: 161px;
    .cartItem {
      display: flex;
      justify-content: space-around;
      height: 141px;
      background: #fff;
      margin-top: 10px;
      padding: 10px;
      .shopItem {
        display: flex;
        justify-content:center;
        align-items: center;
        .shopImg {
          width: 86px;
          height: 86px;
          background: #eee;
        }
        .shopInfo {
          overflow: hidden;
          box-sizing: border-box;
          font-size: 14px;
          margin-left: 5px;
          flex-direction: column;
          .price {
            width: 100px;
            height: 21px;
            display: inline-block;
            margin-top: 15px;
            color: #bb2c08;
          }
          .nameIn {
            width: 221px;
            height: 36px;
          }
          .nameIn span {
            color: #f48f18;
          }
          .lessc {
            margin-top: 15px;
            float: right;
            width: 96px;
            height: 30px;
          }
        }
      }
      .iconfont {
        font-size: 20px;
        line-height: 141px;
        margin: 0 10px;
        color: #999;
      }
      .selected {
        color: #bb2c08;
      }
    }
  }
  .cartFooter {
    display: flex;
    bottom: 50px;
    height: 47px;
    line-height: 47px;
    width: 100%;
    margin-top: 240px;
    justify-content: space-between;
    background: #fff;
    font-size: 15px;

    .right {
      height: 47px;
      .totalPrice {
        margin-right: 15px;
        display: inline-block;
      }
      .preOrder {
        display: inline-block;
        background: #dd1a21;
        width: 112px;
        height: 47px;
        line-height: 47px;
        text-align: center;
        font-size: 19px;
        color: #fff;
      }
    }
    .iconfont {
      font-size: 20px;
      line-height: 47px;
      margin: 0 20px;
      color: #999;
    }
    .selected {
      color: #bb2c08;
    }
  }
  .img {
    width: 375px;
    height: 623px;
    .item {
      width: 375px;
      height: 35px;
      line-height: 35px;
      box-sizing: border-box;
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      .item li {
        font-size: 12px;
      }
    }
    .cartImg {
      width: 124px;
      height: 124px;
      display: block;
      margin: 100px auto;
    }
    .hint {
      text-align: center;
      font-size: 14px;
      color: #ccc;
    }
  }
}
</style>